<template>
  <div class="app-container">
    <el-card header="SIP日志">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="RefreshRight" @click="getList" v-hasPermi="['iot:gb:logList']">刷新</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="logList" border >
        <el-table-column
            type="selection"
            align="center"
            width="55">
        </el-table-column>
        <el-table-column prop="fileName" label="文件名" align="center"></el-table-column>
        <el-table-column prop="fileSize" label="文件大小" align="center">
          <template v-slot:default="scope">
            {{formatFileSize(scope.row.fileSize)}}
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center">
          <template v-slot:default="scope">
            {{formatTimeStamp(scope.row.startTime)}}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center">
          <template v-slot:default="scope">
            {{formatTimeStamp(scope.row.endTime)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template v-slot:default="scope">
            <el-button link type="primary" plain icon="View" @click="showLogView(scope.row)" v-hasPermi="['iot:gb:logFile']">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <el-dialog
      v-model="dialogVisible"
      title="日志"
      width="900px"
  >
    <div id="log-container" v-html="renderedLogs"></div>
  </el-dialog>
</template>

<script setup name="GbLog">
import {getGbLog, getGbLogFile} from "@/api/iot/gbLog.js";
import {onMounted} from "vue";
import { AnsiUp } from 'ansi_up';

const dialogVisible = ref(false);
const logs = ref([]);
const renderedLogs = ref('');
async function showLogView(file) {
  const res = await getGbLogFile(file.fileName);
  logs.value = res.data.log.trim().split('\n');
  const ansiUp = new AnsiUp();
  renderedLogs.value = logs.value
      .map((line) => ansiUp.ansi_to_html(line))
      .join('<br>');
  dialogVisible.value = true;
}
function formatTimeStamp(time) {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

function formatFileSize(fileSize) {
  if (fileSize < 1024) {
    return fileSize + 'B';
  } else if (fileSize < (1024*1024)) {
    let temp = fileSize / 1024;
    temp = temp.toFixed(2);
    return temp + 'KB';
  } else if (fileSize < (1024*1024*1024)) {
    let temp = fileSize / (1024*1024);
    temp = temp.toFixed(2);
    return temp + 'MB';
  } else {
    let temp = fileSize / (1024*1024*1024);
    temp = temp.toFixed(2);
    return temp + 'GB';
  }
}

const logList = ref([]);
const loading = ref(true);
async function getList(){
  loading.value = true;
  const res = await getGbLog();
  logList.value = res.data;
  loading.value = false;
}

onMounted( async () => {
  await getList();
})
</script>

<style scoped>
#log-container {
  font-family: monospace;
  white-space: pre-wrap; /* 保留换行符 */
  background-color: #020202;
  padding: 10px;
  color: #ffffff;
  border: 1px solid #ccc;
  max-height: 500px;
  overflow-y: auto;
}
</style>